<template>
  <div>
    <h3>watch 侦听器</h3>
    <p>银行卡余额: {{money}}</p>
    <button @click="money= money+ 100000">发工资</button>
    <p>{{user}}</p>
    <button @click="user.age++">长一岁</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      money: 100,
      user: {
        name: '小花',
        age: 18
      }
    }
  },
  watch: {
    // 计算属性不支持异步操作(发请求)   侦听器支持
    'money'(newVal, oldVal) {
      console.log('老韩,你发钱了', newVal, '原来有', oldVal);
    },
    // 监听小花的年龄
    'user.age'(newVal, oldVal) {
      console.log('小花,你成熟了', newVal, '之前', oldVal);
      // 可以写很多业务逻辑  (调接口)
      if (newVal >= 21) {
        console.log('不要你了,你是老花');
      }else if(newVal >= 20) {
         console.log('要生娃了')
      } else {
          console.log('快点嫁人了');
      }
      
    }
  }
}
</script>

<style>

</style>